<template>
    <div class="animated fadeInUp hp100" v-cloak>
        <div class="flex_column hp100">
            <ul class="flexbox h50 bg_red pr15 pl15 flex_between top_header">
                <li>
                    <i class="iconfont color_fff fs24" v-on:click="sidebarShow">&#xe639;</i>
                </li>
                <li>
                    <ul class="flexbox">
                        <li class="pl15 pr15">
                            <router-link to="/mylove">
                            <i class="iconfont color_fff fs26 opacity6"
                            v-bind:class='{"opacity10":topIndex===1}'
                            @click="topIndex=1">&#xe608;</i>
                            </router-link>
                        </li>
                        <li class="pl15 pr15">
                            <router-link to="/command">
                            <i class="iconfont color_fff fs26 opacity6" 
                            v-bind:class='{"opacity10":topIndex===2}'
                            @click="topIndex=2">&#xe601;</i>
                            </router-link>
                        </li>
                        <li class="pl15 pr15">
                            <router-link :to='{name:"topic"}'>
                            <i class="iconfont color_fff fs26 opacity6"
                            v-bind:class='{"opacity10":topIndex===3}'
                            @click="topIndex=3">&#xe622;</i>
                            </router-link>
                        </li>
                    </ul>
                </li>
                <li>
                    <router-link to="/search">
                    <i class="iconfont color_fff fs21">&#xe65c;</i>
                    </router-link>
                </li>
            </ul>
            <div class="flex_1 overflow-y-auto">
                <router-view></router-view>
            </div>
        </div>
        
        <div class="modal animated fadeIn" 
        v-on:click="sidebarHide"
        v-bind:class='{"hide":modalShow}'></div>
        <div class="sidebar animated slideInLeft" v-bind:class='{"hide":modalShow}'>
            <div class="sidebar_header fs13 pt25 pb25">
                <p class="tc color_bbb">登录网易云音乐</p>
                <p class="tc color_bbb pt5">320k高音质无限下载，手机电脑多端同步</p>
                <p class="tc color_bbb mt20"><span class="inline-block radius30 btn_border fs14 btn_active">立即登录</span></p>
            </div>
            <div class="lists bg_fff mb5">
                <div class="flexbox pt10 pb15 pl10">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe653;</i></p>
                    <p class="flex_1 fs15">我的消息</p>
                </div>
                <div class="flexbox pl10 pb15">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe60d;</i></p>
                    <p class="flex_1 fs15">会员中心</p>
                </div>
                <div class="flexbox pl10 pb15">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe611;</i></p>
                    <p class="flex_1 fs15">商城</p>
                </div>
                <div class="flexbox pl10 pb10">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe601;</i></p>
                    <p class="flex_1 fs15">在线听歌免流量</p>
                </div>
            </div>
            <div class="lists bg_fff mb5">
                <div class="flexbox pt10 pb15 pl10">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe622;</i></p>
                    <p class="flex_1 fs15">我的好友</p>
                </div>
                <div class="flexbox pl10 pb10">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe606;</i></p>
                    <p class="flex_1 fs15">附近的人</p>
                </div>
            </div>
            <div class="lists bg_fff mb5">
                <div class="flexbox pt10 pb15 pl10">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe6b5;</i></p>
                    <p class="flex_1 fs15">个性换肤</p>
                </div>
                <div class="flexbox pl10 pb10">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe885;</i></p>
                    <p class="flex_1 fs15">听歌识曲</p>
                </div>
                <div class="flexbox pb10 pl10">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe6c3;</i></p>
                    <p class="flex_1 fs15">定时停止播放</p>
                </div>
                <div class="flexbox pl10 pb10">
                    <p class="pr10"><i class="iconfont fs21 color_999">&#xe609;</i></p>
                    <p class="flex_1 fs15">音乐闹钟</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data(){
            return {
                topIndex:2,
                modalShow:true
            }
        },
        methods:{
            sidebarShow:function(){
                var getBody = document.getElementsByTagName("body")[0];
                getBody.className = "over_hidden";
                this.modalShow = false;
            },
            sidebarHide:function(){
                var getBody = document.getElementsByTagName("body")[0];
                getBody.className = "";
                this.modalShow = true;
            }
        }
    }
</script>

<style>
    html,body,#app{
        height:100%;
    }
   .sidebar{
    position: fixed;
    z-index:2;
    top:0;bottom:0;
    width:80%;
    background-color: #EFEFEF;
   }
   .sidebar_header{
    background-color: #000;
   }
   .btn_border{
    border:1px solid #666;
    padding: 5px 50px;
   }
</style>